<template>
  <div class="cp-radio-btn">
    <a
      href="javascript:void(0)"
      :class="['item', active === item.value ? 'active' : '']"
      v-for="item in options"
      @click="toggle(item.value)"
      >{{ item.label }}</a
    >
  </div>
</template>

<script lang="ts" setup name="radio-button">
import { ref, PropType } from 'vue'
type Options = {
  label: string
  value: number
}
const props = defineProps({
  modelValue: Number,
  options: {
    type: Array as PropType<Options[]>,
    default: () => []
  }
})
const emits = defineEmits(['update:modelValue'])
const active = ref(props.modelValue)
const toggle = (value: number) => {
  active.value = value
  emits('update:modelValue', value)
}
</script>

<style lang="scss" scoped>
.cp-radio-btn {
  display: flex;
  flex-wrap: wrap;
  .item {
    height: 32px;
    min-width: 60px;
    line-height: 30px;
    padding: 0 14px;
    text-align: center;
    border: 1px solid var(--cp-bg);
    background-color: var(--cp-bg);
    margin-right: 10px;
    box-sizing: border-box;
    color: var(--cp-text2);
    margin-bottom: 10px;
    border-radius: 4px;
    transition: all 0.3s;
    &.active {
      border-color: var(--cp-primary);
      background-color: var(--cp-plain);
    }
  }
}
</style>
